<template>
  <div>
    <h1>这是商品参数</h1>
    <!-- data 树形的数据 -->
    <!-- props 展示的规则 -->
    <!-- node-click 节点被点击事件 -->
    <!-- node-click 节点被点击事件 -->
    <!-- check-strictly 默认为false，表示父子关联； 如果为true，父子就互不关联 -->
    <button @click="allClick">获取到全选节点信息是：{{ allCheck }}</button>
    <button @click="halfClick">获取到半选节点信息是：{{ halfCheck }}</button>
    <el-tree
      show-checkbox
      :data="datalist"
      :props="defaultProps"
      @check-change="handleCheckChange"
      @node-click="handleNodeClick"
      :default-checked-keys="[194, 195, 196]"
      node-key="cat_id"
      ref="tree"
    ></el-tree>
  </div>
</template>
<script>
export default {
  name: "Params",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "cat_name",
      },
      allCheck: [],
      halfCheck: [],
    };
  },
  computed: {
    datalist() {
      return this.$store.state.cateList;
    },
  },
  created() {
    if (!this.datalist.length) this.$store.dispatch("getCate");
  },
  methods: {
    handleNodeClick(data) {
      // 点击行，以及下级的所有数据！
      console.log(data);
    },
    handleCheckChange(data, checked, indeterminate) {
      // data 点击行，以及下级的所有数据！
      // checked 目前状态
      // indeterminate 之前的状态
      console.log(data, checked, indeterminate);
    },
    allClick() {
      console.log(this.$refs.tree.getCheckedKeys());
      this.allCheck = this.$refs.tree.getCheckedKeys();
    },
    halfClick() {
      this.halfCheck = this.$refs.tree.getHalfCheckedKeys();
    },
  },
};
</script>

<style>
</style>
